<template>
  <div>
    <el-form :model="MomentForm" label-position="top">
      <el-form-item label="动态内容" prop="content">
        <mavon-editor v-model="MomentForm.content" />
      </el-form-item>

      <el-form-item label="点赞数" prop="likes" style="width: 50%">
        <el-input v-model="MomentForm.likes" placeholder="可选，默认为 0" type="number" />
      </el-form-item>

      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="MomentForm.createTime"
          :editable="false"
          placeholder="可选，默认此刻"
          type="datetime"
        ></el-date-picker>
      </el-form-item>

      <el-form-item style="text-align: right">
        <el-button type="info" @click="onSubmit(false)">仅自己可见</el-button>
        <el-button type="primary" @click="onSubmit(true)">发布动态</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { getMomentById, saveMoment, updateMoment } from '@/api/moment'

  export default {
    name: 'MomentWriter',
    components: {},
    data() {
      return {
        MomentForm: {
          content: '',
          createTime: null,
          likes: 0,
          published: false,
        },
      }
    },
    computed: {},
    created() {
      if (this.$route.params.id) {
        this.getMoment(this.$route.params.id)
      }
    },
    methods: {
      getMoment(id) {
        getMomentById(id).then((res) => {
          this.MomentForm = res.data
        })
      },
      onSubmit(isPublished) {
        this.MomentForm.published = isPublished
        if (this.$route.params.id) {
          updateMoment(this.MomentForm).then((res) => {
            this.msgSuccess(res.msg)
            this.$router.push('/blog/moment/list')
          })
        } else {
          saveMoment(this.MomentForm).then((res) => {
            this.msgSuccess(res.msg)
            this.$router.push('/blog/moment/list')
          })
        }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
